<template>
	
	<view>
		<tableList>
			<block slot="head">
				<th>
					一级菜单
				</th>
				
				<th >
					二级菜单
				</th>
				
				<th class="autoWidth">
					操作
				</th>
			</block>
			<block slot="body">
				<block v-for="( x , index) in myList" :key="x.id" v-if="x.type == 1">
					
					<tr v-for="( s , sIndex) in myList" :key="s.id" v-if="s.parentId == x.id">
						
						<td :rowspan="x.total" v-if="s.id == x.firstChildId">
							<div class="layui-unselect layui-form-checkbox" :class="x.isChecked  ? 'layui-form-checked' : ''" lay-skin="primary" @tap="checkFirst(index)">
								<span>{{x.name}}</span>
								<i class="layui-icon layui-icon-ok"></i>
							</div>
						</td>
						<td >
							<div class="layui-unselect layui-form-checkbox" :class="s.isChecked  ? 'layui-form-checked' : ''" lay-skin="primary" @tap="checkSec(sIndex)">
								<span>{{s.name}}</span>
								<i class="layui-icon layui-icon-ok"></i>
							</div>
						</td>
						<td>
							<block v-for="( t , tIndex) in myList" :key="t.id" v-if="t.parentId == s.id">
								<div class="layui-unselect layui-form-checkbox" :class="t.isChecked  ? 'layui-form-checked' : ''" lay-skin="primary" @tap="checkThird(tIndex)">
									<span>{{t.name}}</span>
									<i class="layui-icon layui-icon-ok"></i>
								</div>
							</block>
						</td>
					</tr>
					
					
					
				</block>
			</block>
		</tableList>
		<input type="text" :name="name" :value="myValue" style="display: none;">
	</view>
	
</template>

<script>
	export default {
		name : "menuGroup" ,
		props:{
			name : { //请求权限地址
				type : String , 
				default : "menuId"
			},
			value : {
				type : String ,
				default : ""
			},
			list:{
				type : Array , //是否验证无权限
				default : function(res){
					return [] ;	
				}
			}
		},
		created : function(e){
			this.initValue();
		},
		watch:{
			value : function(res){
				this.initValue();
			},
			list : function(res){
				this.initValue();
			},
		},
		data() {
			return {
				myList : this.list 
			};
		},
		
		computed:{
			myValue : function(res){
				var val = [] ;
				for (var i = 0; i < this.myList.length; i++) {
					var cur = this.myList[i];
					if(cur.isChecked){
						val.push(cur.id);
					}
				}
				return val.join(',');
			}
		},
		
		methods:{
			initValue : function(res){
				var value = this.value ;
				var list = JSON.parse(JSON.stringify(this.list));
				for (var i = 0; i < list.length; i++) {
					var cur = list[i];
					cur['isChecked'] = this.isCheckedByValue(cur.id) ;
					if(cur.type == 1){
						this.dealSub(list , i);
					}
				}
				this.myList = list ;
			},
			
			isCheckedByValue:function(id){
				var value = this.value ;
				if(!value){
					return false ;
				}
				var arr = value.split(",");
				for (var i = 0; i < arr.length; i++) {
					var cur = arr[i];
					if(cur == id){
						return true ;
					}
				}
				return false ;
			},
			
			dealSub:function( list , index){
				var parent = list[index] ;
				var parentId = parent.id ;
				var subList = [] ;
				for (var i = 0; i < list.length; i++) {
					var cur = list[i];
					if(cur.parentId == parentId){
						if(subList.length == 0){
							parent['firstChildId'] = cur.id ;
						}
						subList.push(cur);
					}
				}
				parent['total'] = subList.length ;
				return list ;
			},
			
			checkThird:function(index){
				var cur = this.myList[index];
				cur.isChecked = !cur.isChecked ;
				var parentId = cur.parentId ;
				var grandpaId = this.checkParent(parentId);
				this.checkParent(grandpaId);
			},
			
			checkSec:function(index){
				var cur = this.myList[index];
				cur.isChecked = !cur.isChecked ;
				var parentId = cur.parentId ;
				this.checkParent(parentId);
				for (var i = 0; i < this.myList.length; i++) {
					var third = this.myList[i];
					if(third.parentId == cur.id){
						third.isChecked = cur.isChecked ;
					}
				}
			},
			
			checkFirst :function(index){
				var first = this.myList[index];
				var isChecked = !first.isChecked ;
				first.isChecked = isChecked ;
				for (var i = 0; i < this.myList.length; i++) {
					var cur = this.myList[i];
					if(cur.parentId == first.id){
						cur.isChecked = isChecked ;
						for (var j = 0; j < this.myList.length; j++) {
							var third = this.myList[j];
							if(third.parentId == cur.id){
								third.isChecked = isChecked ;
							}
						}
					}
				}
			},
			
			checkParent:function(parentId){
				var needCheck = false ;
				for (var i = 0; i < this.myList.length; i++) {
					var cur = this.myList[i];
					if(cur.parentId == parentId && cur.isChecked){
						needCheck = true ;
						break ;
					}
				}
				
				for (var i = 0; i < this.myList.length; i++) {
					var cur = this.myList[i];
					if(cur.id == parentId){
						cur.isChecked = !cur.isChecked ? needCheck : true ;
						return cur.parentId ;
					}
				}
			},
			
			setValue:function(){
				var val = [] ;
				for (var i = 0; i < this.myList.length; i++) {
					var cur = this.myList[i];
					if(cur.isChecked){
						val.push(cur.id);
					}
				}
				this.myValue = val.join(',');
			},
			
		}
	}
</script>

<style>

</style>
